import { Ref, ref as vueRef, onMounted } from 'vue'

export function useDomSize(ref: Ref<HTMLElement | undefined>) {
  const width = vueRef(0);
  const height = vueRef(0);

  onMounted(() => {
    if (ref.value) {
      window.addEventListener('resize', (e) => {
        if (ref.value?.clientWidth) {
          width.value = ref.value?.clientWidth;
        }

        if (ref.value?.clientHeight) {
          height.value = ref.value.clientHeight;
        }
      })
    }
  })

  return {
    width,
    height
  }
}